<template lang="">
  <a-carousel
    :style="{
      width: '700px',
      height: '340px',
      textAlign: 'center',
      margin: '0 auto',
      borderRadius: '8px',
      overflow: 'hidden',
      boxShadow: '0 0 8px rgba(0, 0, 0, 0.15)',
      background: '#fff',
      border: '1px solid #e8e8e8',
      borderRadius: '4px',
      transition: 'all 0.7s',
    }"
    :auto-play="true"
    indicator-type="dot"
    show-arrow="hover"
  >
    <a-carousel-item v-for="item in data">
      <h5>{{item.name}}:<span style="color: red;">{{item.desc}}</span></h5>
      <img
        :src="item.coverImage"
        :style="{
          height: '100%',
          width: '100%',
        }"
      />
    </a-carousel-item>
  </a-carousel>
  <a-button type="primary" status="success" @click="$router.push('/car')">前往购物车</a-button>

  <a-tabs default-active-key="2"  @tab-click="tabClick($event)" >
    <a-tab-pane key="2" title="首页">
      <div style="display:flex; justify-content:space-between; flex-wrap:wrap;">
    <div v-for="item in datas" @click="edit(item.id,item)">
      <img
      style="width: 300px;height: 300px;"
        :src="item.coverImage"
      />
      <h2>{{item.name}}</h2>
    </div>
  </div>
    </a-tab-pane>
    <a-tab-pane  v-for="item in dast"  :key="item.id" :title="item.name">
    <div style="display:flex; justify-content:space-between; flex-wrap:wrap;">
    <div v-for="item in dada" @click="edit(item.id,item)">
      <img
      style="width: 300px;height: 300px;"
        :src="item.coverImage" 
      />
      <h2>{{item.name}}</h2>
    </div>
  </div>
  
    </a-tab-pane>
   
  </a-tabs>

  
</template>
<script>
import {getMedicineAPIs,getIllnesssAPIs,getMedicineCategoryAPI,getMedicineAPIIs} from '@/api/api'
import{imgs} from '../../tools/request'
export default {
  data(){
    return{
      
      dast:[],
      data:[],
      datas:[],
      dada:[

      ]
    }
  },
  methods:{
    list(){
      getMedicineCategoryAPI().then(res=>{
       // console.log(res);
        this.dast=res.data.map((item)=>({
          ...item,
          coverImage:imgs(item.image)
        }))
        console.log(this.dast);
      })

    },
    liat(){
      getIllnesssAPIs().then(res=>{
        console.log(res);
        this.data=res.data.map((item)=>({
          ...item,
          coverImage:imgs(item.image)
        }))
        console.log(this.data);
      })
    },
    
    liats(){
      getMedicineAPIs().then(res=>{
       // console.log(res);
        this.datas=res.data.list.map((item)=>({
          ...item,
          coverImage:imgs(item.image)
        }))
        console.log(this.datas);
      })
    },
    edit(id,record){
      if(record){
        this.$router.push({
          path:'/xiangqin',
          query:{
            id:id
          }
        })
      }

    },
    tabClick(event){
      if (event!=2) {
        console.log('ok');
      console.log(event);
      getMedicineAPIIs(event).then(res=>{
        this.dada=res.data.list.map((item)=>({
          ...item,
          coverImage:imgs(item.image)
        }))
        console.log(this.dada);
        if(this.dada.length==0){
          this.$message.error('暂无数据')
        }
      })
      }
     
    }
    

  },
  mounted(){
    this.liat()
    this.liats()
    this.list()

  },
  
}
</script>
<style lang="">
  
</style>